<template>
  <div class="leading-relaxed">
    <!-- 博客网站 Logo Begin -->
    <KoiLogo></KoiLogo>
    <!-- 博客网站 Logo End -->

    <div class="m-t-16px m-b-50px">
      <el-row :gutter="50">
        <!-- 左侧 Begin -->
        <el-col :xl="16" :lg="16" :md="15" :sm="24" :xs="24" class="<lg:m-b-40px">
          <!-- 文章内容 Begin -->
          <!-- 文章属性 Begin -->
          <div class="m-b-16px flex flex-col flex-items-center" v-if="articleContent">
            <!-- 文章类型 -->
            <div
              class="text-[--el-color-primary] text-18px font-700 tracking-2px text-center h-18px m-b-18px capitalize"
              style="font-family: 'Dancing Script', cursive"
            >
            {{ articleContent.categoryName }}
            </div>
            <!-- 文章标签 -->
            <div class="flex line-clamp-1 m-y-6px">
              <div
                class="text-#000 dark:text-#D8D8D8 m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-4px text-#000 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px"
                style="font-family: 'Muli', sans-serif"
                v-for="tag in articleContent.tagList"
                :key="tag.tagId"
              >
                {{ tag.tagName }}
              </div>
            </div>
            <!-- 文章标题 -->
            <div
              class="text-#1D1D1D dark:text-#D8D8D8 p-x-18px text-36px <xl:text-32px <lg:text-28px <md:text-24px font-600 transition-1500 max-h-136px overflow-hidden line-height-46px text-center capitalize"
              style="font-family: 'Open Sans', sans-serif"
            >
              <div class="gradient-line">{{ articleContent.articleTitle }}</div>
            </div>
            <!-- 文章作者 -->
            <div
              class="text-center m-t-12px flex flex-row flex-justify-center flex-items-center"
              style="font-family: 'Muli', sans-serif"
            >
              <div class="border-1px border-solid border-[--el-color-primary] w-34px h-34px p-1px rounded-full m-r-10px">
                <el-image :src="avatarUrl" fit="cover" class="w-30px h-30px rounded-full hover:opacity-70 transition-all duration-600 transition-ease-in-out">
                  <template #error>
                    <el-image :src="errorUrl" fit="contain" class="w-30px h-30px rounded-full hover:opacity-70 transition-all duration-600 transition-ease-in-out"></el-image>
                  </template>
                </el-image>
              </div>
              <div class="flex flex-justify-center flex-items-center">
                <div class="text-13px font-600 text-#1D1D1D dark:text-#D8D8D8">{{ articleContent.createBy }}</div>
                <div class="text-[--el-color-primary] text-13px m-x-3px font-bold">﹣</div>
                <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ articleContent.createTime }}</div>
                <div class="text-[--el-color-primary] text-13px m-x-3px font-bold">﹣</div>
                <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ getFormatToK(articleContent.views) + ' Views' }}</div>
                <div class="text-[--el-color-primary] text-13px m-x-3px font-bold">﹣</div>
                <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ total || 0 }} Comments</div>
              </div>
            </div>
            <!-- 文章图片 -->
            <div class="w-100% m-t-16px">
              <el-image :src="articleContent.picture" :preview-src-list="[articleContent.picture]" fit="cover" class="w-100% max-h-520px">
                <template #error>
                  <el-image :src="errorUrl" fit="contain" class="w-100% h-256px"></el-image>
                </template>
              </el-image>
            </div>
            <!-- 文章内容 -->
            <div class="w-100%">
              <MdPreview
                class="w-100%"
                v-model="articleContent.content"
                :editorId="editorId"
                :theme="globalStore.isDark ? 'dark' : 'light'"
                :previewTheme="globalStore.previewTheme"
                :codeTheme="globalStore.codeTheme"
              />
            </div>
          </div>     
          <!-- 文章属性 End -->
          <!-- 骨架屏 Begin -->
          <div class="w-100% m-b-40px" v-else>
            <el-skeleton animated>
              <template #template>
                <el-skeleton-item variant="image" class="w-100% h-360px m-b-15px" />
                <div class="flex flex-wrap flex-justify-center gap-2%">
                  <div class="w-48% <md:w-100% flex flex-col flex-justify-between m-b-15px" v-for="(_item, index) in 10" :key="index">
                    <div class="w-100%">
                      <el-skeleton-item variant="image" class="w-100% h-256px <md:h-360px m-r-10px m-b-15px" />
                      <el-skeleton-item class="w-120px h-26px" />
                      <div class="flex flex-row m-y-10px">
                        <el-skeleton-item class="w-75px h-26px m-r-10px" />
                        <el-skeleton-item class="w-100px h-26px" />
                      </div>
                      <el-skeleton-item class="w-100% h-36px" />
                      <div class="flex flex-row flex-items-center m-y-10px">
                        <el-skeleton-item variant="image" class="rounded-full w-30px h-30px m-r-10px" />
                        <el-skeleton-item class="w-200px h-20px" />
                      </div>
                      <el-skeleton-item class="w-100% h-50px m-b-16px" />
                      <el-skeleton-item class="w-120px h-26px m-b-16px" />
                    </div>
                  </div>
                </div>
              </template>
            </el-skeleton>
          </div>
          <!-- 骨架屏 End --> 
          <!-- 文章内容 End -->
          <!-- 相关文章 Begin -->
          <div>
            <div class="row-title flex flex-items-center flex-justify-center m-b-40px w-100%">
              <div class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
                style="font-family: 'Open Sans', sans-serif">
                Related Post
              </div>
            </div>
            <el-row :gutter="27">
              <!-- 上一篇 -->
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="previousChapter">
                <div>
                  <div class="w-100% h-256px <md:h-360px overflow-hidden m-b-15px">
                    <el-image :src="previousChapter.picture" fit="cover"
                      class="w-100% h-100% hover:transform-scale-105 transition-all duration-600 ease-in-out"
                      @click="handlePreviousChapter(previousChapter.articleId)"  
                    >
                      <template #error>
                        <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
                      </template>
                    </el-image>
                  </div>
                  <!-- 文章类别 -->
                  <div class="capitalize text-18px font-700 text-[--el-color-primary] tracking-1px m-b-15px"
                    style="font-family: 'Dancing Script', cursive">
                    {{ previousChapter.categoryName }}
                  </div>
                  <!-- 文章标签 -->
                  <div class="flex line-clamp-1 m-b-6px">
                    <div v-for="tag in previousChapter.tagList" :key="tag.tagId"
                      class="text-#000 dark:text-#D8D8D8 m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-4px text-#000 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px"
                      style="font-family: 'Muli', sans-serif">
                      {{ tag.tagName }}
                    </div>
                  </div>
                  <!-- 文章标题 gradient-line -->
                  <div
                    class="gradient-title capitalize text-#333 text-23px font-700 h-70px line-clamp-2 dark:text-#D8D8D8 hover:text-#606266 dark:hover:text-#9A9A9A"
                    style="font-family: 'Open Sans', sans-serif"
                    @click="handlePreviousChapter(previousChapter.articleId)"
                  >
                    {{ previousChapter.articleTitle }}
                  </div>
                  <!-- 文章作者 AND 创建时间 -->
                  <div class="text-center m-y-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
                    style="font-family: 'Muli', sans-serif">
                    <div
                      class="border-1px border-solid border-[--el-color-primary] w-34px h-34px p-1px rounded-full m-r-8px">
                      <el-image :src="avatarUrl" fit="cover" class="w-30px h-30px rounded-full hover:opacity-70 transition-all duration-600 transition-ease-in-out">
                        <template #error>
                          <el-image :src="errorUrl" fit="contain" class="w-30px h-30px rounded-full hover:opacity-70 transition-all duration-600 transition-ease-in-out"></el-image>
                        </template>
                      </el-image>
                    </div>
                    <div class="text-13px font-600 text-#1D1D1D dark:text-#D8D8D8">
                      {{ previousChapter.createBy }}
                    </div>
                    <div class="text-[--el-color-primary] text-12px m-x-6px font-bold">﹣</div>
                    <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ previousChapter.createTime }}</div>
                    <div class="text-[--el-color-primary] text-12px m-x-6px font-bold">﹣</div>
                    <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">50K Views</div>
                  </div>
                  <!-- 文章描述 -->
                  <div class="text-#7E7E7E dark:text-#D8D8D8 text-14px h-46px line-clamp-2">
                    {{ previousChapter.remark }}
                  </div>
                  <!-- 阅读更多 -->
                  <div
                    class="text-12px hover:text-[--el-color-primary] text-#1D1D1D dark:text-#D8D8D8 uppercase tracking-1px font-600 m-t-15px inline-block border-b-solid border-b-1px border-b-[--el-color-primary]"
                    @click="handlePreviousChapter(previousChapter.articleId)"  
                  >
                    READ MORE
                  </div>
                </div>              
              </el-col>
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="previousIsSkeleton == 1">
                <!-- 骨架屏 Begin -->
                <div class="w-100%">
                  <el-skeleton animated>
                    <template #template>
                      <div class="flex flex-wrap">
                        <div class="p-x-15px w-100% flex flex-col flex-justify-between m-b-15px">
                          <el-skeleton-item variant="image" class="w-100% h-256px <md:h-360px m-r-10px m-b-15px" />
                          <el-skeleton-item class="w-120px h-26px" />
                          <div class="flex flex-row m-y-10px">
                            <el-skeleton-item class="w-75px h-26px m-r-10px" />
                            <el-skeleton-item class="w-100px h-26px" />
                          </div>
                          <el-skeleton-item class="w-100% h-36px" />
                          <div class="flex flex-row flex-items-center m-y-10px">
                            <el-skeleton-item variant="image" class="rounded-full w-30px h-30px m-r-10px" />
                            <el-skeleton-item class="w-200px h-20px" />
                          </div>
                          <el-skeleton-item class="w-100% h-50px m-b-16px" />
                          <el-skeleton-item class="w-120px h-26px m-b-16px" />
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                <!-- 骨架屏 End -->  
              </el-col>
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="previousIsSkeleton == 2"></el-col>
              <!-- 上一篇 End -->         
              <!-- 下一篇 Begin -->
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="nextChapter && nextChapter != 'none'">
                <div>
                  <div class="w-100% h-256px <md:h-360px overflow-hidden m-b-15px">
                    <el-image :src="nextChapter.picture" fit="cover"
                      class="w-100% h-100% hover:transform-scale-105 transition-all duration-600 ease-in-out"
                      @click="handleNextChapter(nextChapter.articleId)"  
                    >
                      <template #error>
                        <el-image :src="errorUrl" fit="contain" class="w-100% h-100%"></el-image>
                      </template>
                    </el-image>
                  </div>
                  <!-- 文章类别 -->
                  <div class="capitalize text-18px font-700 text-[--el-color-primary] tracking-1px m-b-15px"
                    style="font-family: 'Dancing Script', cursive">
                    {{ nextChapter.categoryName }}
                  </div>
                  <!-- 文章标签 -->
                  <div class="flex line-clamp-1 m-b-6px">
                    <div v-for="tag in nextChapter.tagList" :key="tag.tagId"
                      class="text-#000 dark:text-#D8D8D8 m-r-3px m-b-3px p-y-5px p-x-10px border-1px border-[--el-color-primary] border-solid rounded-4px text-#000 text-12px hover:text-[--el-color-primary] font-400 tracking-1px line-height-12px"
                      style="font-family: 'Muli', sans-serif">
                      {{ tag.tagName }}
                    </div>
                  </div>
                  <!-- 文章标题 gradient-line -->
                  <div
                    class="gradient-title capitalize text-#333 text-23px font-700 h-70px line-clamp-2 dark:text-#D8D8D8 hover:text-#606266 dark:hover:text-#9A9A9A"
                    style="font-family: 'Open Sans', sans-serif"
                    @click="handleNextChapter(nextChapter.articleId)"
                  >
                    {{ nextChapter.articleTitle }}
                  </div>
                  <!-- 文章作者 AND 创建时间 -->
                  <div class="text-center m-y-10px flex flex-row flex-justify-start flex-items-center line-clamp-1"
                    style="font-family: 'Muli', sans-serif">
                    <div
                      class="border-1px border-solid border-[--el-color-primary] w-34px h-34px p-1px rounded-full m-r-8px">
                      <el-image :src="avatarUrl" fit="cover" class="w-30px h-30px rounded-full hover:opacity-70 transition-all duration-600 transition-ease-in-out">
                        <template #error>
                          <el-image :src="errorUrl" fit="contain" class="w-30px h-30px"></el-image>
                        </template>
                      </el-image>
                    </div>
                    <div class="text-13px font-600 text-#1D1D1D dark:text-#D8D8D8">
                      {{ nextChapter.createBy }}
                    </div>
                    <div class="text-[--el-color-primary] text-12px m-x-6px font-bold">﹣</div>
                    <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ nextChapter.createTime }}</div>
                    <div class="text-[--el-color-primary] text-12px m-x-6px font-bold">﹣</div>
                    <div class="text-13px text-#4B4F56 dark:text-#D8D8D8">{{ getFormatToK(nextChapter.views) + ' Views' }}</div>
                  </div>
                  <!-- 文章描述 -->
                  <div class="text-#7E7E7E dark:text-#D8D8D8 text-14px h-46px line-clamp-2">
                    {{ nextChapter.remark }}
                  </div>
                  <!-- 阅读更多 -->
                  <div
                    class="text-12px hover:text-[--el-color-primary] text-#1D1D1D dark:text-#D8D8D8 uppercase tracking-1px font-600 m-t-15px inline-block border-b-solid border-b-1px border-b-[--el-color-primary]"
                    @click="handleNextChapter(nextChapter.articleId)"
                  >
                    READ MORE
                  </div>
                </div>
              </el-col>
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="nextIsSkeleton == 1">
                <!-- 骨架屏 Begin -->
                <div class="w-100%">
                  <el-skeleton animated>
                    <template #template>
                      <div class="flex flex-wrap">
                        <div class="p-x-15px w-100% flex flex-col flex-justify-between m-b-15px">
                          <el-skeleton-item variant="image" class="w-100% h-256px <md:h-360px m-r-10px m-b-15px" />
                          <el-skeleton-item class="w-120px h-26px" />
                          <div class="flex flex-row m-y-10px">
                            <el-skeleton-item class="w-75px h-26px m-r-10px" />
                            <el-skeleton-item class="w-100px h-26px" />
                          </div>
                          <el-skeleton-item class="w-100% h-36px" />
                          <div class="flex flex-row flex-items-center m-y-10px">
                            <el-skeleton-item variant="image" class="rounded-full w-30px h-30px m-r-10px" />
                            <el-skeleton-item class="w-200px h-20px" />
                          </div>
                          <el-skeleton-item class="w-100% h-50px m-b-16px" />
                          <el-skeleton-item class="w-120px h-26px m-b-16px" />
                        </div>
                      </div>
                    </template>
                  </el-skeleton>
                </div>
                <!-- 骨架屏 End -->  
              </el-col>
              <el-col :xl="12" :lg="12" :md="12" :sm="12" :xs="24" class="m-b-40px" v-if="nextIsSkeleton == 2"></el-col>            
              <!-- 下一篇 End -->               
            </el-row>
          </div>
          <!-- 相关文章 End -->
          <!-- 联系我 Begin -->
          <div class="w-100% flex flex-col">
            <div class="row-title flex flex-items-center flex-justify-center m-b-40px m-b-40px w-100%">
              <div
                class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
                style="font-family: 'Open Sans', sans-serif"
              >
                Comment Form
              </div>
            </div>
            <div>
              <div class="flex flex-justify-center">
                <KoiUploadImage v-model:imageUrl="commentForm.avatar" disabled>
                  <template #content>
                    <el-icon><Avatar /></el-icon>
                    <span>请上传头像</span>
                  </template>
                  <template #tip>图片最大为 3M</template>
                </KoiUploadImage>
              </div>
              <div class="text-12px text-center m-y-10px text-#727272 dark:text-#D8D8D8">温馨提示：输入QQ号后，自动获取QQ头像和QQ昵称！</div>
              <div class="flex w-100% gap-60px">
                <input type="text" placeholder="QQ Number *" v-model="commentForm.qq" @blur="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                <input type="text" placeholder="QQ NickName *" v-model="commentForm.nickName" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
              </div>
              <div class="flex w-100%">
                <input type="text" placeholder="Custom Avatar *" v-model="commentForm.avatar" @blur="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
              </div>
              <div class="w-100% flex">
                <textarea placeholder="Your Message *" rows="7" v-model="commentForm.content" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif"></textarea>
              </div>
              <div class="flex flex-justify-between">
                <el-popover
                  :width="385"
                  trigger="hover"
                >
                  <template #reference>
                    <el-button circle class="text-16px">😊</el-button>
                  </template>
                  <div class="text-26px flex flex-wrap">
                    <div v-for="(item, index) in emojiList" :key="index" @click="handleEmoji(item)">{{ item }}</div>
                  </div>
                </el-popover>
                <el-button
                  class="uppercase tracking-1px w-150px h-45px rounded-0 text-12px text-#fff hover:text-#fff font-500 bg-[--el-color-primary] hover:bg-[--el-color-primary]"
                  @click="handleConfirm(0)"
                >
                  <div style="font-family: 'Roboto', sans-serif">Submit Comment</div>
                </el-button>
              </div>
            </div>
          </div>
          <!-- 联系我 End -->   
          <!-- 评论 Begin -->
          <div class="m-t-40px">
            <div class="row-title flex flex-items-center flex-justify-center m-b-40px w-100%">
              <div class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
                style="font-family: 'Open Sans', sans-serif">
                {{ total || 0 }} Comments
              </div>
            </div>
            
            <div v-for="(item, parentIndex) in commentList" :key="item.commentId" v-if="total > 0" class="m-t-12px border-solid border-1px border-transparent border-b-#E9ECEF">
              <!-- 父评论 -->
              <div class="flex flex-justify-between m-b-12px p-b-10px">
                <div
                  class="border-1px border-solid border-[--el-color-primary] w-66px h-66px p-2px rounded-full m-r-8px">
                  <el-image :src="item.avatar" fit="cover" class="w-60px h-60px hover:opacity-70 rounded-full">
                    <template #error>
                      <el-image :src="errorUrl" fit="contain" class="w-60px h-60px"></el-image>
                    </template>
                  </el-image>
                </div>
                <div class="m-l-20px flex flex-col w-100%">
                  <div class="text-#333 text-16px font-600 dark:text-#E9ECEF">{{ item.nickName }}</div>
                  <div class="text-#777 text-13px line-clamp-2 max-h-42px">{{ item.content }}</div>
                  <div class="flex flex-justify-between m-t-5px">
                    <div class="flex flex-items-center">
                      <el-icon :size="15" color="#808080"><Clock /></el-icon>
                      <div class="text-#808080 text-11px m-l-5px m-t-2px">{{ item.createTime }}</div>
                    </div>
                    <div class="flex">
                      <div class="m-r-6px text-#000 dark:text-#E9ECEF text-12px rounded-4px p-x-6px border-1px border-solid border-transparent hover:border-[--el-border-color-light] hover:bg-[--el-fill-color-light] hover:text-[--el-color-primary]" :class="[ item.isReply ? 'text-red hover:text-red': 'border-transparent text-#000 dark:text-#E9ECEF']" @click="handleToggleReply(parentIndex)">{{ item.isReply ? 'Cancel' : 'Reply' }}</div>
                      <el-popconfirm
                        confirm-button-text="Yes"
                        cancel-button-text="No"
                        icon-color="#626AEF"
                        title="您确定要删除么?"
                        @confirm="handleConfirmDelete"
                        @cancel="handleCancelDelete"
                      >
                        <template #reference>
                          <div class="text-#000 dark:text-#E9ECEF text-12px rounded-4px p-x-6px border-1px border-solid border-transparent hover:border-[--el-border-color-light] hover:bg-[--el-fill-color-light] hover:text-[--el-color-primary]">Delete</div>  
                        </template>
                      </el-popconfirm>
                    </div> 
                  </div>
                </div>
              </div>
              <!-- 父级回复评论 Begin -->
              <div v-if="item.isReply">
                <div class="flex flex-justify-center">
                  <KoiUploadImage v-model:imageUrl="commentForm.avatar" disabled>
                    <template #content>
                      <el-icon><Avatar /></el-icon>
                      <span>请上传头像</span>
                    </template>
                    <template #tip>图片最大为 3M</template>
                  </KoiUploadImage>
                </div>
                <div class="text-12px text-center m-y-10px text-#727272 dark:text-#D8D8D8">温馨提示：输入QQ号后，自动获取QQ头像和QQ昵称！</div>
                <div class="flex w-100% gap-60px">
                  <input type="text" placeholder="QQ Number *" v-model="commentForm.qq" @blur="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                  <input type="text" placeholder="QQ NickName *" v-model="commentForm.nickName" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                </div>
                <div class="flex w-100%">
                  <input type="text" placeholder="Custom Avatar *" v-model="commentForm.avatar" @blur="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                </div>
                <div class="w-100% flex">
                  <textarea :placeholder="item.nickName ? '@ ' + item.nickName + ' Your Message *' : 'Your Message *'" rows="7" v-model="commentForm.replyContent" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif"></textarea>
                </div>
                <div class="flex flex-justify-between">
                  <el-popover
                    :width="385"
                    trigger="hover"
                  >
                    <template #reference>
                      <el-button circle class="text-16px">😊</el-button>
                    </template>
                    <div class="text-26px flex flex-wrap">
                      <div v-for="(item, index) in emojiList" :key="index" @click="handleEmoji(item)">{{ item }}</div>
                    </div>
                  </el-popover>
                  <el-button
                    class="uppercase tracking-1px w-150px h-45px rounded-0 text-12px text-#fff hover:text-#fff font-500 bg-[--el-color-primary] hover:bg-[--el-color-primary]"
                    @click="handleConfirm(item.commentId, item.commentId)"
                  >
                    <div style="font-family: 'Roboto', sans-serif">Submit Comment</div>
                  </el-button>
                </div>
              </div>
              <!-- 父级回复评论 End -->

              <!-- 子评论 -->
              <div v-if="item?.childrenCommentList && item?.childrenCommentList.length > 0" v-for="(child, childIndex) in item.childrenCommentList" :key="child.commentId" class="flex flex-col">
                <div class="p-l-30px flex flex-justify-between m-b-12px">
                  <div
                    class="border-1px border-solid border-[--el-color-primary] w-52px h-52px p-2px rounded-full m-r-8px">
                    <el-image :src="child.avatar" fit="cover" class="w-46px h-46px hover:opacity-70 rounded-full">
                      <template #error>
                        <el-image :src="errorUrl" fit="contain" class="w-46px h-46px"></el-image>
                      </template>
                    </el-image>
                  </div>
                  <div class="m-l-20px flex flex-col w-100%">
                    <div class="text-#333 text-14px font-600 dark:text-#E9ECEF">{{ child.nickName }}
                      <span class="text-[--el-text-color-regular] font-400 text-14px line-height-14px" v-if="child.replyNickName">回复 </span>
                      <span class="text-[--el-color-primary]" v-if="child.replyNickName">{{ child.replyNickName }}</span>
                    </div>
                    <div class="text-#777 text-13px line-clamp-2 max-h-42px">{{ child.content }}</div>
                    <div class="flex flex-justify-between m-t-5px">
                      <div class="flex flex-items-center">
                        <el-icon :size="15" color="#808080"><Clock /></el-icon>
                        <div class="text-#808080 text-11px m-l-5px m-t-2px">{{ child.createTime }}</div>
                      </div>
                      <div class="flex">
                        <div class="m-r-6px text-#000 dark:text-#E9ECEF text-12px rounded-4px p-x-6px border-1px border-solid border-transparent hover:border-[--el-border-color-light] hover:bg-[--el-fill-color-light] hover:text-[--el-color-primary]" :class="[ child.isReply ? 'text-red hover:text-red': 'border-transparent text-#000 dark:text-#E9ECEF']" @click="handleToggleReply(parentIndex, childIndex)">{{ child.isReply ? 'Cancel' : 'Reply' }}</div>
                        <el-popconfirm
                          confirm-button-text="Yes"
                          cancel-button-text="No"
                          icon-color="#626AEF"
                          title="您确定要删除么?"
                          @confirm="handleConfirmDelete"
                          @cancel="handleCancelDelete"
                        >
                          <template #reference>
                            <div class="text-#000 dark:text-#E9ECEF text-12px rounded-4px p-x-6px border-1px border-solid border-transparent hover:border-[--el-border-color-light] hover:bg-[--el-fill-color-light] hover:text-[--el-color-primary]">Delete</div>  
                          </template>
                        </el-popconfirm>
                      </div> 
                    </div>
                  </div>
                </div>
                <!-- 子级回复评论 Begin -->
                <div class="p-l-30px" v-if="child.isReply">
                  <div class="flex flex-justify-center">
                    <KoiUploadImage v-model:imageUrl="commentForm.avatar" disabled>
                      <template #content>
                        <el-icon><Avatar /></el-icon>
                        <span>请上传头像</span>
                      </template>
                      <template #tip>图片最大为 3M</template>
                    </KoiUploadImage>
                  </div>
                  <div class="text-12px text-center m-y-10px text-#727272 dark:text-#D8D8D8">温馨提示：输入QQ号后，自动获取QQ头像和QQ昵称！</div>
                  <div class="flex w-100% gap-60px">
                    <input type="text" placeholder="QQ Number *" v-model="commentForm.qq" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                    <input type="text" placeholder="QQ NickName *" v-model="commentForm.nickName" @input="getQQApi" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                  </div>
                  <div class="flex w-100%">
                    <input type="text" placeholder="Custom Avatar *" v-model="commentForm.avatar" @input="getQQApi" class="m-b-30px flex-1 text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif" />
                  </div>
                  <div class="w-100% flex">
                    <textarea :placeholder="child.nickName ? '@ ' + child.nickName + ' Your Message *' : 'Your Message *'" rows="7" v-model="commentForm.replyContent" class="flex-1 m-b-30px text-13px border-1px border-solid border-#dfdfdf text-#151515 dark:text-#D8D8D8 focus:border-[--el-color-primary] font-500 block outline-0 p-y-15px p-x-20px transition-300" style="font-family: 'Roboto', sans-serif"></textarea>
                  </div>
                  <div class="flex flex-justify-between">
                    <el-popover
                      :width="385"
                      trigger="hover"
                    >
                      <template #reference>
                        <el-button circle class="text-16px">😊</el-button>
                      </template>
                      <div class="text-26px flex flex-wrap">
                        <div v-for="(item, index) in emojiList" :key="index" @click="handleEmoji(item)">{{ item }}</div>
                      </div>
                    </el-popover>
                    <el-button
                      class="uppercase tracking-1px w-150px h-45px rounded-0 text-12px text-#FFF hover:text-#FFF font-500 bg-[--el-color-primary] hover:bg-[--el-color-primary]"
                      @click="handleConfirm(child.replyId, child.commentId)"
                    >
                      <div style="font-family: 'Roboto', sans-serif">Submit Comment</div>
                    </el-button>
                    {{ child.commentId }}
                  </div>
                </div>
                <!-- 子级回复评论 End -->
              </div>
            </div>  

            <!-- 评论分页 -->
            <!-- <div class="flex flex-justify-center m-t-10px">
              <el-pagination
                background
                :pager-count="5"
                v-model:current-page="searchParams.pageNo"
                v-model:page-size="searchParams.pageSize"
                v-show="total > 0"
                layout="total, prev, pager, next, jumper"
                :total="total"
                @size-change="handleCommentListPage"
                @current-change="handleCommentListPage"
              />
            </div>   -->

          <!-- 评论数据为 0 -->
          <div class="w-100% flex flex-justify-center" v-if="total == 0">
            <el-empty :image="errorUrl" :image-size="300" description="主人，没有数据了哟👻"></el-empty>
          </div>

            <!-- 骨架屏 Begin -->
            <div class="w-100%" v-if="total > 0 && commentSkeleton">
              <el-skeleton animated>
                <template #template>
                  <div class="flex flex-justify-between m-b-20px p-b-10px border-solid border-1px border-transparent border-b-#E9ECEF" v-for="(_item, index) in 5" :key="index">
                    <div
                      class="border-1px border-solid border-[--el-color-primary] w-60px h-60px p-1px rounded-full m-r-8px">
                      <el-skeleton-item variant="image" class="w-60px h-60px rounded-full hover:opacity-70" />
                    </div>

                    <div class="m-l-20px flex flex-col w-100%">
                      <el-skeleton-item class="w-120px h-16px" />
                      <el-skeleton-item class="w-100% h-42px m-t-5px" />
                      <div class="flex flex-justify-between m-t-5px">
                        <el-skeleton-item class="w-160px h-12px" />
                        <el-skeleton-item class="w-80px h-12px" />
                      </div>
                    </div>
                  </div>
                </template>
              </el-skeleton>
            </div>
            <!-- 骨架屏 End --> 
          </div>           
          <!-- 评论 End -->        
        </el-col>
        <!-- 左侧 End -->

        <!-- 右侧 Begin -->
        <el-col :xl="8" :lg="8" :md="9" :sm="24" :xs="24" class="affix-box">
          <!-- 个人信息 Begin -->
          <KoiAuthor></KoiAuthor>
          <!-- 个人信息 End -->
          <!-- 文章目录 Begin -->
          <!-- 骨架屏 Begin -->
          <el-affix target=".affix-box" :offset="36" class="<sm:hidden"> 
            <div class="w-100% m-t-40px pos-sticky top-76px">
              <div class="row-title flex flex-items-center flex-justify-center m-b-26px w-100%">
                <div class="col-title capitalize text-center text-22px text-#333 dark:text-#D8D8D8 font-700 tracking-1px"
                  style="font-family: 'Open Sans', sans-serif">
                  Article Catalog
                </div>
              </div>
              <div class="border-1px border-solid border-[--el-color-primary-light-7] p-12px rounded-8px hover:border-[--el-color-primary] transition-all transition-300 transition-ease" ref="catalogDataRef" v-if="articleContent">
                <div class="m-b-8px">
                  <el-dropdown @command="handlePreviewCommand">
                    <el-button type="primary" size="small" plain class="!outline-none">
                      预览主题<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="default" :disabled="globalStore.previewTheme == 'default'">default</el-dropdown-item>
                        <el-dropdown-item command="github" :disabled="globalStore.previewTheme == 'github'">github</el-dropdown-item>
                        <el-dropdown-item command="vuepress" :disabled="globalStore.previewTheme == 'vuepress'"
                          >vuepress</el-dropdown-item
                        >
                        <el-dropdown-item command="mk-cute" :disabled="globalStore.previewTheme == 'mk-cute'">mk-cute</el-dropdown-item>
                        <el-dropdown-item command="smart-blue" :disabled="globalStore.previewTheme == 'smart-blue'"
                          >smart-blue</el-dropdown-item
                        >
                        <el-dropdown-item command="cyanosis" :disabled="globalStore.previewTheme == 'cyanosis'"
                          >cyanosis</el-dropdown-item
                        >
                        <el-dropdown-item command="codeTheme" :disabled="globalStore.previewTheme == 'codeTheme'"
                          >codeTheme</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                  <el-dropdown class="m-l-6px" @command="handleCodeCommand">
                    <el-button type="primary" size="small" plain class="!outline-none">
                      代码主题<el-icon class="el-icon--right"><arrow-down /></el-icon>
                    </el-button>
                    <template #dropdown>
                      <el-dropdown-menu>
                        <el-dropdown-item command="atom" :disabled="globalStore.codeTheme == 'atom'">atom</el-dropdown-item>
                        <el-dropdown-item command="a11y" :disabled="globalStore.codeTheme == 'a11y'">a11y</el-dropdown-item>
                        <el-dropdown-item command="github" :disabled="globalStore.codeTheme == 'github'">github</el-dropdown-item>
                        <el-dropdown-item command="gradient" :disabled="globalStore.codeTheme == 'gradient'">gradient</el-dropdown-item>
                        <el-dropdown-item command="kimbie" :disabled="globalStore.codeTheme == 'kimbie'">kimbie</el-dropdown-item>
                        <el-dropdown-item command="paraiso" :disabled="globalStore.codeTheme == 'paraiso'">paraiso</el-dropdown-item>
                        <el-dropdown-item command="qtcreator" :disabled="globalStore.codeTheme == 'qtcreator'"
                          >qtcreator</el-dropdown-item
                        >
                        <el-dropdown-item command="stackoverflow" :disabled="globalStore.codeTheme == 'stackoverflow'"
                          >stackoverflow</el-dropdown-item
                        >
                      </el-dropdown-menu>
                    </template>
                  </el-dropdown>
                </div>
                <div class="overflow-y-auto max-h-66vh">
                  <MdCatalog :editorId="editorId" :scrollElement="scrollElement" :offsetTop="80" :scrollElementOffsetTop="70" />
                </div> 
              </div>   
              <el-skeleton animated v-else>
                <template #template>
                  <div class="flex flex-col">
                    <el-skeleton-item class="w-100% h-50px m-b-16px" />
                    <el-skeleton-item class="w-100% h-26px m-b-16px" v-for="(_item, index) in 10" :key="index" />
                  </div>
                </template>
              </el-skeleton>          
            </div>
          </el-affix>
          <!-- 骨架屏 End -->
          <!-- 文章目录 End -->
        </el-col>
        <!-- 右侧 End -->
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import KoiLogo from "@/views/logo/index.vue";
import KoiAuthor from "@/views/home/components/Author.vue";
import { ref, onMounted } from "vue";
import { koiMsgSuccess, koiMsgWarning, koiMsgError } from "@/utils/koi.ts";
import { useRoute, useRouter } from "vue-router";
import { getFormatToK } from "@/utils/index.ts";
import { listArticleContent, updateViews } from "@/api/blog/content/index.ts";
import { listComment, replyComment } from "@/api/blog/comment/index.ts";
// import { getQQMessage } from "@/api/blog/qq/index.ts";
import errorUrl from "@/assets/images/error/404.png";
import { MdPreview, MdCatalog } from "md-editor-v3";
import "md-editor-v3/lib/style.css";
import useGlobalStore from "@/stores/modules/global.ts";
import useCommentStore from "@/stores/modules/comment.ts";

const globalStore = useGlobalStore();
const commentStore = useCommentStore();
const route = useRoute();
const router = useRouter();
const editorId = ref("KOI-MD-ARTICLE-PREVIEW-EDITOR");
const scrollElement = ref<any>(document.documentElement);

/** 预览主题 */
const handlePreviewCommand = (command: string) => {
  globalStore.setGlobalState("previewTheme", command);
};

/** 代码主题 */
const handleCodeCommand = (command: string) => {
  globalStore.setGlobalState("codeTheme", command);
};

onMounted(async () => {
  articleId.value = route.params.articleId || route.query.articleId || "";
  if (!articleId.value) {
    koiMsgWarning("未获取到关键参数，请返回首页重试");
    return;
  }
  await handleUpdateViews();
  handleArticleContent();
  handleCommentValue();
  handleListComment();
});

const articleId = ref();
const articleContent = ref();
const previousIsSkeleton = ref(1);
const nextIsSkeleton = ref(1);

/** 获取文章内容 */
const handleArticleContent = async () => {
  // 初始化加载骨架屏
  previousIsSkeleton.value = 1;
  nextIsSkeleton.value = 1;
  try {
    const res: any = await listArticleContent(articleId.value);
    console.log("文章内容：", res.data);
    articleContent.value = res.data;
    previousChapter.value = res.data.previousChapter; 
    nextChapter.value = res.data.nextChapter;
    // 等于2时候，没有上一章，等于3的时候，有上一章
    previousChapter.value ? previousIsSkeleton.value = 3 : previousIsSkeleton.value = 2;
    nextChapter.value ? nextIsSkeleton.value = 3 : nextIsSkeleton.value = 2;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
  // 修改浏览器当前标签页标题
  document.title = articleContent.value?.articleTitle ? articleContent.value?.articleTitle : "文章标题";
};

/** 网站浏览数更新 */
const handleUpdateViews = async () => {
  try {
    await updateViews(articleId.value);
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

const avatarUrl = "https://pic3.zhimg.com/80/v2-cb928dab1abe5231fb87db69498de128_720w.webp";
const previousChapter = ref();
const nextChapter = ref();

/** 上一篇 */
const handlePreviousChapter = (articleId: any) => {
  router.push(`/article/content/${articleId}`);
};

/** 下一篇 */
const handleNextChapter = (articleId: any) => {
  router.push(`/article/content/${articleId}`);
};


const catalogDataRef = ref();

/** 目录数据多，不自动滚动问题 */
// const handleCatalogScroll = () => {
//   console.log("1111");
//   const highlightedItem: any = document.querySelector('.md-editor-catalog-active > span');
//   console.log("highlightedItem", highlightedItem);
//   if (!catalogDataRef.value) return;
//   console.log("catalogDataRef.value", catalogDataRef.value);
//   const containerRect = catalogDataRef.value.getBoundingClientRect();
//   const itemRect = highlightedItem.getBoundingClientRect();
//   console.log("containerRect", containerRect);
//   console.log("itemRect", itemRect);
//   // 判断高亮目录项是否接近目录容器的隐藏区域
//   if (itemRect.top <= containerRect.top + 20 || itemRect.bottom >= containerRect.bottom - 20) {
//     // 自动向下滚动 50px
//     const newScrollTop = catalogDataRef.value.scrollTop + 20;
//     catalogDataRef.value.scrollTo({ top: newScrollTop, behavior: 'smooth' });
//   }
// };

/** 查询参数 */
// const searchParams = ref<any>({
//   pageNo: 1, // 第几页
//   pageSize: 5 // 每页显示多少条
// });

const total = ref(0);
const commentSkeleton = ref(false);

// 评论
const commentList = ref<any>([
  // {
  //   commentId: 1,
  //   avatar: avatarUrl,
  //   nickName: "于心",
  //   content: "“很爱我普通的小生活。”",
  //   createTime: "2025-11-11 12:00:00"
  // },
  // {
  //   commentId: 2,
  //   avatar: avatarUrl,
  //   nickName: "Carolyn Stonen",
  //   content: "“生活不在别处，当下即是全部。”",
  //   createTime: "2025-11-11 12:00:00"
  // },
  // {
  //   commentId: 3,
  //   avatar: avatarUrl,
  //   nickName: "Brandon Miller",
  //   content: "“所见皆为美好，所行不负年少。”",
  //   createTime: "2025-11-11 12:00:00"
  // },
  // {
  //   commentId: 4,
  //   avatar: avatarUrl,
  //   nickName: "Maikel Alisa",
  //   content: "“见过花开的人便会懂得风的温柔。”",
  //   createTime: "2025-11-11 12:00:00"
  // },
  // {
  //   commentId: 5,
  //   avatar: avatarUrl,
  //   nickName: "Michelle Nelson",
  //   content: "“没有边角料 都是主旋律！”",
  //   createTime: "2025-11-11 12:00:00"
  // }
]);

/** 评论数据 */
const handleListComment = async () => {
  try {
    total.value = 0;
    commentSkeleton.value = true;
    commentList.value = []; // 重置表格数据
    const res: any = await listComment(articleId.value);
    console.log("评论数据->", res.data?.records);
    commentList.value = res.data?.records;
    total.value = res.data?.total || 0;
    commentSkeleton.value = false;
  } catch (error) {
    console.log(error);
    koiMsgError("数据查询失败，请刷新重试🌻");
  }
};

/** 评论数据过多可进行分页 */
// const handleCommentListPage = async () => {
//   total.value = 100;
//   try {
//     tableList.value = []; // 重置表格数据
//     loading.value = true;
//     const res: any = await listPage(searchParams.value);
//     console.log("数据表格数据->", res.data);
//     tableList.value = res.data.records;
//     total.value = res.data.total;
//     loading.value = false;
//   } catch (error) {
//     console.log(error);
//     koiNoticeError("数据查询失败，请刷新重试🌻");
//   }
// };

const commentForm = ref<any>({
  qq: "",
  nickName: "",
  avatar: "",
  content: "",
  parentId: "",
  routerUrl: "",
  articleId: "",
  replyId: "",
  replyContent: "" // 防止提交表单和回复字段一样
});

/** 重置表单 */
const resetCommentForm = () => {
  commentForm.value = {
    qq: "",
    nickName: "",
    avatar: "",
    content: "",
    parentId: "",
    routerUrl: "",
    articleId: "",
    replyId: "",
    replyContent: ""
  }
};

/** 根据QQ号获取昵称和头像信息 */
const getQQApi = async () => {
  console.log("111")
  if (commentForm.value.qq.length === 0) {
    koiMsgError("请输入正确的QQ号！");
    return;
  }
  // 判断QQ号的长度
  if (commentForm.value.qq.length < 5) {
    // 如果长度小于5，QQ号不完整，返回错误信息
    koiMsgError("请输入正确的QQ号！");
    return;
  }

  // const res: any = await getQQMessage(commentForm.value.qq);
  // if (res.code != 200) {
  //   koiMsgError("获取QQ信息失败，请检查网络！");
  //   return;
  // }
  
  // const { name, imgurl } = res;
  // commentForm.value.nickName = name;
  // commentForm.value.avatar = imgurl;

  commentForm.value.avatar = `http://q.qlogo.cn/headimg_dl?dst_uin=${commentForm.value.qq}&spec=640&img_type=jpg`
  commentStore.setQq(commentForm.value.qq);
  commentStore.setAvatar(commentForm.value.avatar);
  commentStore.setNickName(commentForm.value.nickName);
  if (commentForm.value.avatar.length === 0) {
    koiMsgError("头像信息获取失败，请自行上传！");
    return;
  }
  if (commentForm.value.nickName.length === 0) {
    koiMsgError("昵称信息获取失败，请自行填写！");
    return;
  }
}

/** 评论表单默认值 */
const handleCommentValue = () => {
  commentForm.value.qq  = commentStore.qq;
  commentForm.value.avatar = commentStore.avatar;
  commentForm.value.nickName = commentStore.nickName;
};

/** 提交 */
const handleConfirm = (parentId: number, replayId?: any) => {
  if (commentForm.value.qq.length === 0) {
    koiMsgWarning("请输入正确的QQ号！");
    return;
  }
  if (commentForm.value.avatar.length === 0) {
    koiMsgWarning("请上传头像！");
    return;
  }
  if (commentForm.value.nickName.length === 0) {
    koiMsgWarning("请填写昵称！");
    return;
  }
  if (commentForm.value.content.length === 0 && parentId == 0) {
    koiMsgWarning("请输入留言内[1]！");
    return;
  }
  if (commentForm.value.replyContent.length === 0 && parentId != 0) {
    koiMsgWarning("请输入留言内容[2]！");
    return;
  }
  handleReply(parentId, replayId);
  resetCommentForm();
  handleCommentValue();
};

/** 评论提交 */
const handleReply = async (parentId: number, replyId?: any) => {
  console.log(parentId, replyId);
  try {
    commentForm.value.articleId = articleId.value;
    commentForm.value.parentId = parentId;
    if (parentId && parentId != 0) {
      commentForm.value.replyId = replyId;
      commentForm.value.content = commentForm.value.replyContent;
    }
    commentForm.value.routerUrl = "/article/content/" + articleId.value;
    commentStore.setQq(commentForm.value.qq);
    commentStore.setAvatar(commentForm.value.avatar);
    commentStore.setNickName(commentForm.value.nickName);
    await replyComment(commentForm.value);
    handleListComment();
    koiMsgSuccess("评论成功");
  } catch (error) {
    console.log(error);
    koiMsgError("回复失败，请刷新重试🌻");
  }
};

/** 切换回复表单显示状态[精确控制父子级] */
const handleToggleReply = (parentIndex: number, childIndex?: number) => {
  commentList.value.forEach((parentItem: any, pIndex: number) => {
    // 处理父级状态
    const isCurrentParent = pIndex === parentIndex
    const wasParentActive = parentItem.isReply
    
    // 点击父级：关闭所有其他父级和所有子级
    if (childIndex === undefined) {
      parentItem.isReply = isCurrentParent ? !wasParentActive : false
    } 
    // 点击子级：关闭所有父级[包括当前父级]
    else {
      parentItem.isReply = false
    }

    // 处理子级状态
    if (parentItem.childrenCommentList) {
      parentItem.childrenCommentList.forEach((childItem: any, cIndex: number) => {
        const isTargetChild = isCurrentParent && cIndex === childIndex
        
        // 点击父级：关闭所有子级
        if (childIndex === undefined) {
          childItem.isReply = false
        } 
        // 点击子级：只保留当前子级激活
        else {
          childItem.isReply = isTargetChild ? !childItem.isReply : false
        }
      })
    }
  });
};

/** 确认删除 */
const handleConfirmDelete = () => {
  koiMsgSuccess("删除成功！[骗你的]");
};

/** 取消删除 */
const handleCancelDelete = () => {
  koiMsgWarning("已取消！");
};

const emojiList = ref<any>([
  "😀",
  "😄",
  "😊",
  "😁",
  "😂",
  "🙂",
  "🥰",
  "😘",
  "😗",
  "😚",
  "🤭",
  "🤫",
  "🤔",
  "🤪",
  "🤐",
  "😐️",
  "🤑",
  "😴",
  "😑",
  "😷",
  "😵‍💫",
  "🥳",
  "😎",
  "😭",
  "😱",
  "🤬",
  "💩",
  "🤡",
  "👻",
  "💖",
  "💔",
  "💢",
  "🫰",
  "🤞",
  "👊",
  "👎️",
  "👏",
  "🤝",
  "💪",
  "🤙",
  "👍️",
  "🤝",
  "🐽",
  "🐻",
  "🦄",
  "🕊️",
  "🏵️",
  "💐",
  "🍉",
  "🧀",
  "🍡",
  "🦀",
  "🦐",
  "🦞",
  "☕️",
  "🍻",
  "☃️",
  "🚫",
  "🏀",
  "🎖️"
]);

const handleEmoji = (emoji?: any) => {
  commentForm.value.content += emoji;
  koiMsgSuccess("已添加");
};
</script>

<style lang="scss">
.md-editor-catalog-active > span {
  color: var(--el-color-primary) !important;
}
.md-editor-catalog-indicator {
  background-color: var(--el-color-primary) !important;
}
.md-editor-catalog-link span:hover {
  color: var(--el-color-primary) !important;
}
</style>
